<template>
  <view class="sign">
    <component :is="current.component" :workOrderId="workOrderId" v-model:onMore="onMore" />
    <!-- <view class="sign-tabs">
      <view
        class="sign-item"
        v-for="(item, k) in tabList"
        :key="k"
        @click="changeTab(item)"
      >
        <uv-icon
          :name="current.type == item.type ? item.activeIcon : item.icon"
          size="40rpx"
          space="10rpx"
          :label="item.label"
          label-pos="bottom"
          :label-color="current.type == item.type ? '#212121' : '#BDBDBD'"
          label-size="24rpx"
        />
      </view>
    </view> -->
  </view>
</template>
<script setup>
import { markRaw, ref } from "vue";
import { onLoad, onReachBottom } from "@dcloudio/uni-app";

import Clock from "@/pages/sign/cp/Clock.vue";
import Count from "@/pages/sign/cp/Count.vue";

import sign from "@/static/sign/icon_sign.png";
import sign1 from "@/static/sign/icon_sign1.png";
import count from "@/static/sign/icon_count.png";
import count1 from "@/static/sign/icon_count1.png";

const current = ref({}); // 当前选中
const workOrderId = ref(''); // 工单id
const onMore = ref(false); // 上拉加载
const tabList = ref([
  { type: 1, label: "打卡", icon: sign, activeIcon: sign1, component: markRaw(Clock) },
  { type: 2, label: "统计", icon: count, activeIcon: count1, component: markRaw(Count) },
]);

onLoad((e) => {
  let type = e.type || 1;
  workOrderId.value = e.workOrderId;
  let row = tabList.value.find((i) => i.type == type);
  current.value = row ? row : tabList.value[0];
});

onReachBottom(() => {
  onMore.value = true;
})

// tab切换
const changeTab = (item) => {
  current.value = item;
};
</script>
<style lang="scss" scoped>
.sign {
  .sign-tabs {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-around;
    align-items: center;
    background-color: #fff;
    height: 120rpx;
    box-shadow: 0 0 30rpx 2rpx rgba(94, 94, 94, 0.16);
    border-radius: 60rpx 60rpx 0 0;
    z-index: 9;
    view {
      flex: 1;
    }
  }
}
</style>
